<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客服列表</title>
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/common.css" media="all">
    <script src="/js/layui/layui.all.js"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div style="text-align: center;line-height: normal">
                <div class="layui-inline">
                    <input class="layui-input" name="id" id="test-table-demoReload" placeholder="请输入客服名"
                           autocomplete="off">
                </div>

                <div class="layui-inline">
                    <div class="layui-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-inline">
                                <select id="status" name="status">
                                    <option value="-1">不限</option>
                                    <option value="0">禁用</option>
                                    <option value="1">启用</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-admin search" lay-submit lay-filter="LAY-user-back-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i><span>搜索</span>
                    </button>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <table class="layui-hide" id="t" lay-filter="t"></table>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="caozuo">
    {{#  if (d.status == 0) {  }}
    <input type="button" value="启用" class="layui-btn layui-btn-sm" lay-event="qiyong"/>
    {{# } else if(d.status == 1){  }}
    <input type="button" value="禁用" class="layui-btn layui-btn-sm" lay-event="jinyong"/>
    {{# } }}
    <input type="button" value="重置密码" class="layui-btn layui-btn-sm" lay-event="reset"/>
</script>
<script>
    var $ = layui.$;
    var table = layui.table;
    var form = layui.form;

    form.render('select');
    table.render({
        elem: '#t',
        id: 'tt',
        toolbar: '#tb',
        url: '/kefu/selectKefu',
        cols: [[
            {fixed: 'left', field: '', title: '序号', width: 70, type: 'numbers', align: 'center'},
            {field: 'jdname', title: '网络接待老师', width: 200, align: 'center'},
            {
                field: 'jdpassword', title: '密码', width: 250, align: 'center', templet: function (d) {
                    var s = "";
                    for (let i = 0; i < d.jdpassword.length; i++) {
                        s += "*";
                    }
                    return s;
                }
            },
            {field: 'jdphone', title: '手机号', width: 200, align: 'center'},
            {
                fixed: 'right', field: 'status', align: 'center', title: '状态', width: 120, templet: function (d) {
                    return d.status == 0 ? "<span style='color: red'>已禁用</span>" : "<span style='color: green'>已启用</span>"
                }
            },
            {fixed: 'right', toolbar: '#caozuo', title: '操作', width: 200, align: 'center'}
        ]],
        page: true,
        page: {
            curr: layui.data("thaitrade_kefu_page").index
        },
        done: (res, curr, count) => {
            layui.data("thaitrade_kefu_page", {
                key: 'index',
                value: curr
            });
        }
    });

    table.on('edit(t)', function (obj) {
        var value = obj.value //得到修改后的值
            , data = obj.data //得到所在行所有键值
            , field = obj.field; //得到字段
        layer.confirm("确定修改成:" + value + "?", ["确定", "取消"],
            function () {
                $.ajax({
                    url: '/kefu/edit',
                    data: {id: data.id, columName: field, value: value},
                    success: function (data) {
                        if (data.code == 200) {
                            layer.msg("编辑成功", {icon: 1, time: 1000});
                        } else {
                            layer.msg(data.data, {icon: 2, time: 1500});
                            var page = $(".layui-laypage-em").next().html();
                            table.reload('tt', {
                                where: {
                                    kefuName: $("#test-table-demoReload").val(),
                                    status: $("#status").val(),
                                },
                                page: {curr: page}
                            });
                        }
                    }
                })
            },
            function () {
                var page = $(".layui-laypage-em").next().html();
                table.reload('tt', {
                    where: {
                        kefuName: $("#test-table-demoReload").val(),
                        status: $("#status").val(),
                    },
                    page: {curr: page}
                });
            });
    });

    $('.test-table-operate-btn .layui-btn').on('click', function () {
        var type = $(this).data('type')
        active[type] ? active[type].call(this) : ''
    })

    //    右侧按钮的的监听事件
    table.on('tool(t)', function (obj) {
        var getdata = obj.data //获得当前行数据
        var layEvent = obj.event //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr //获得当前行 tr 的 DOM 对象（如果有的话）
        switch (layEvent) {
            case 'qiyong':
                layer.confirm("确定要启用该客服?", ["确定", "取消"], function () {
                    $.ajax({
                        url: '/kefu/updateStatus',
                        data: {id: getdata.jdid, status: 1},
                        success: function (data) {
                            if (data.code == 200) {
                                layer.msg("启用成功", {icon: 1, time: 1000}, function () {
                                    location.reload()
                                });
                            } else {
                                layer.msg(data.msg, {icon: 1, time: 1000});
                            }
                        }
                    })
                });
                break;
            case 'jinyong':
                layer.confirm("确定要禁用该客服?", ["确定", "取消"], function () {
                    $.ajax({
                        url: '/kefu/updateStatus',
                        data: {id: getdata.jdid, status: 0},
                        success: function (data) {
                            if (data.code == 200) {
                                layer.msg("禁用成功", {icon: 1, time: 1000}, function () {
                                    location.reload()
                                });
                            } else {
                                layer.msg(data.msg, {icon: 0, time: 1000});
                            }
                        }
                    })
                });
                break;
            case "reset":
                layer.confirm("确定将密码重置为123456吗?", ["确定", "取消"], function () {
                    $.ajax({
                        url: '/kefu/edit',
                        data: {id: getdata.jdid, columName: "jdpassword", value: "123456"},
                        success: function (data) {
                            if (data.code == 200) {
                                layer.msg("重置成功", {icon: 1, time: 1000}, function () {
                                    location.reload()
                                });
                            } else {
                                layer.msg(data.msg, {icon: 2, time: 1000});
                            }
                        }
                    })
                });
                break;
        }
    });

    function search() {
        var text = $('#test-table-demoReload').val();
        table.reload('tt', {
            url: '/kefu/selectKefu',
            where: {
                kefuName: text,
                status: $("#status").val(),
            },
            page: {
                curr: 1
            }
        })
    }

    //搜索
    $('.search').on('click', function () {
        search();
    });

    // 关键词搜索框添加绑定回车函数
    $('#test-table-demoReload').bind('keypress', function (event) {
        search();
    });


</script>
</html>